<template>
  <div id="select-class-room">
    <div class="top-tab-query">
      <div class="tab">
        <div
          :class="selectTab == 'jzw' ? 'tab-active' : 'tab-no-select'"
          @click="tabClick('jzw')"
        >
          按建筑物
        </div>
        <div
          :class="selectTab == 'bm' ? 'tab-active' : 'tab-no-select'"
          @click="tabClick('bm')"
        >
          按部门
        </div>
        <div
          :class="selectTab == 'lx' ? 'tab-active' : 'tab-no-select'"
          @click="tabClick('lx')"
        >
          按类型
        </div>
      </div>
      <div class="query-tab">
        <div class="tab-no-select">搜索</div>
        <div>
          <el-input v-model="queryName" size="mini" placeholder="请输入内容"></el-input>
        </div>
        <div class="search-button" @click="queryPlaceListByName">
          <img src="../../../../assets/assessment/icon-search.png" alt=""/>
          <span @click="queryInfo">查询</span>
        </div>
      </div>
    </div>
    <el-row style="width: 100%; overflow: hidden">
      <el-col :span="4">
        <el-tree
          default-expand-all
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
          style="color: #004ca7; margin: 20px 40px;background: #f0f2f5;"
        ></el-tree>
      </el-col>
      <el-col :span="20" class="border-left">
        <div class="assessment-container">
          <div class="table-container">
            <el-table
              :data="tableData"
              border
              class="table-data"
              row-class-name="row-class"
              cell-class-name="cell-class"
              header-row-class-name="header-row-class"
              header-cell-class-name="header-cell-class"
              style="height: 580px; overflow-y: auto"
              @selection-change="handleSelectionChange"
            >
              <el-table-column align="center" type="selection" width="80">
              </el-table-column>
              <el-table-column prop="cdmc" label="场地场所名称" align="center">
              </el-table-column>
              <el-table-column prop="mj" label="面积(平方米)" align="center">
              </el-table-column>
              <el-table-column
                prop="krnrs"
                label="容纳人数"
                width="130"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="cdlx"
                label="场地场所类型"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="ssxq" label="所属校区" align="center">
              </el-table-column>
              <el-table-column
                prop="ssjzw"
                label="所属建筑物"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="dept"
                label="管理部门"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="floor"
                label="楼层"
                align="center"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- <div class="wrapper-container">
          <div class="bottom-block" style="display: block">
            <div class="text">当前共找到200条记录,当前显示51-100条</div>
          </div>
          <div class="pagination-block">
            <el-pagination
              prev-text="上一页"
              next-text="下一页"
              :page-size="100"
              layout="prev, pager, next, jumper"
              :total="1000"
            >
            </el-pagination>
          </div>
        </div> -->
        <div class="btn-caozuo">
          <el-button type="warning" style="margin-right:100px" size="mini" plain @click="savePlace()">保存</el-button>
          <el-button type="danger" size="mini" plain @click="cancelPlace()">取消</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {queryPlaceByTypeAndName, queryPlaceListByName} from "@/api/trainingManagement/place.js";
  import ButtonItem from "@/components/ButtonItem.vue";

  export default {
    components: {
      ButtonItem,
    },
    props: {
      source: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        classno: this.$route.query.classNo,
        selectTab: "jzw", //选择建筑物标签
        queryName: "", //查询关键字
        // 校区列表
        data: [],
        defaultProps: {
          children: "children",
          label: "name",
        },
        tableData: [],
        selectList: [], //选中课表
        selectNode: {}, //选中节点
        selectLevel: {},
      };
    },
    created() {
    },
    mounted() {
      this.queryPlaceByTypeAndName();
    },
    methods: {
      // 查询场地列表
      queryPlaceListByName() {
        var cdmc = this.queryName;
        var cdlx = "";
        var ssxq = "";
        var deptName = "";
        var jzwName = "";
        var floorName = "";
        if (this.selectTab == 'jzw') {
          if (this.selectLevel.level && this.selectLevel.level == 1) {
            deptName = this.selectNode.name
          }
          if (this.selectLevel.level && this.selectLevel.level == 2) {
            jzwName = this.selectNode.name
            deptName = this.selectLevel.parent.data.name
          }
          if (this.selectLevel.level && this.selectLevel.level == 3) {
            floorName = this.selectNode.name
            jzwName = this.selectLevel.parent.data.name
            deptName = this.selectLevel.parent.parent.data.name
          }
        }
        if (this.selectTab == 'bm') {
          ssxq = this.selectNode.id || "";
        }
        if (this.selectTab == 'lx') {
          cdlx = this.selectNode.id || "";
        }

        queryPlaceListByName(cdmc, cdlx,ssxq, deptName, jzwName, floorName).then(res => {
          if (res.data.code == 200) {
            this.tableData = res.data.data;
          }
        })
      },
      handleSelectionChange(val) {
        this.selectList = val;
      },
      cancelPlace() {
        if (this.source == 'dialog') {
          this.selectList = [];
          this.$emit("cancelPlaceInfo");
        } else {
          var currentView = this.$store.state.tagsView.visitedViews[0]
          for (currentView of this.$store.state.tagsView.visitedViews) {
            if (currentView.path === this.$route.path) {
              break
            }
          }
          this.$store.dispatch('tagsView/delView', currentView)
            .then(({visitedViews}) => {
              if (currentView.path === this.$route.path) {
                this.$router.go(-1)
              }
            })
        }
      },
      savePlace() {
        if (this.selectList.length > 0) {
          if (this.selectList.length != 1) {
            this.$message.warning("只能选择一个教学场地!")
            return;
          } else {
            if (this.source == 'dialog') {
              this.$emit("savePlaceInfo", this.selectList);
            } else {
              console.log(this.selectList)
              var currentView = this.$store.state.tagsView.visitedViews[0]
              for (currentView of this.$store.state.tagsView.visitedViews) {
                if (currentView.path === this.$route.path) {
                  break
                }
              }
              this.$store.dispatch('tagsView/delView', currentView)
                .then(({visitedViews}) => {
                  if (currentView.path === this.$route.path) {
                    this.$router.push({
                      path: "/admin/elective/workOutClass",
                      query: {
                        classNo: this.classno,
                        placeName: this.selectList[0].cdmc,
                        placeId: this.selectList[0].id,
                      }
                    })
                  }
                })

            }
          }
        } else {
          this.$message.warning("请先选择一个教学场地!")
          return;
        }
      },
      async queryPlaceByTypeAndName() {
        var type = this.selectTab == 'jzw' ? '1' : this.selectTab == 'bm' ? '2' : '3';
        var name = this.queryName;
        const res = await queryPlaceByTypeAndName(type, name);
        if (res.data.code == 200) {
          this.data = res.data.data;
          // this.selectNode = this.data[0];
          this.queryPlaceListByName();
        }
      },
      handleNodeClick(data, node) {
        this.selectNode = data;
        this.selectLevel = node;
        this.queryPlaceListByName()
      },
      // tab切换
      tabClick(str) {
        this.selectTab = str;
        this.selectNode = {}
        this.selectLevel = {}
        this.queryPlaceByTypeAndName();
      },
      // 信息查询
      queryInfo() {
      },
    },
    computed: {}, //计算属性
  };
</script>

<style lang="less" scoped>
  .assessment-container {
    width: 100%;
    .el-dialog__body {
      height: 251px;
    }
    .el-dialog__footer {
      padding: 10px 20px 45px;
    }
    .el-checkbox__inner:hover {
      border-color: #004ca7;
    }
    .el-checkbox__inner {
      border: 1px solid #004ca7;
      border-radius: 0;
      height: 18px;
      width: 18px;
    }
    .el-checkbox__inner::after {
      height: 10px;
      left: 6px;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #004ca7;
      border-color: #004ca7;
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #004ca7;
    }
    .el-checkbox.is-bordered.is-checked {
      border-color: #004ca7;
    }
    .el-checkbox__input.is-focus .el-checkbox__inner {
      border-color: #004ca7;
    }
  }
</style>
<style lang="less" scoped>
  @import "../../../../styles/text.less";

  /deep/ .assessment-container {
    width: 100%;
  }

  .assessment-container .table-container {
    width: 100%;
  }

  // .assessment-container .table-container .table-header {
  //   width: 1935px;
  // }
  // .assessment-container .table-container .table-body {
  //   width: 1935px;
  // }
  /deep/ .szjky .el-dialog__body {
    height: 432px;
  }

  .pagination-block {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .message-container {
    > div {
      display: inline-block;
      &:nth-child(1) {
        padding-left: 111px;
        font-size: 20px;
        color: rgba(0, 76, 167, 1);
        font-weight: bold;
        vertical-align: top;
      }
      &:nth-child(2) {
      }
    }
  }
</style>
<style lang="less" scoped>
  @import "../../../../styles/supervision.less";

  .wrapper-container {
    width: 1400px;
    margin: 0 auto;
  }

  /deep/ .table-container {
    width: 1300px;
    .el-table td,
    .el-table th.is-leaf,
    .el-table--border,
    .el-table--group {
      border-color: #c7d7eb;
    }

    .el-table__header tr,
    .el-table__header th {
      padding: 0;
      height: 76px;
      background-color: #edf2f9;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 20px;
      color: #004ca7;
    }

    .el-table__body tr,
    .el-table__body td {
      padding: 0;
      height: 86px;
    }

    .wrapper-button {
      display: flex;
      flex-direction: column;
      align-items: center;

      > div {
        margin-bottom: 8px;
      }
    }
    .table-data {
      width: 100%;
      border: 0.8px solid #004ca7;
      /*border-radius: 9px;*/
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #004ca7;
    }
  }

  .wrapper-container .search-container .search-container-left {
    flex-wrap: wrap;
    .search-container-item {
      width: 12%;
      margin-right: 0px;
      .box {
        > span {
          text-align: left;
        }
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 20px;
        align-items: center;
      }
    }
  }

  /deep/ .el-date-editor.el-input {
    width: 110px;
  }

  /deep/ .el-input--medium {
    width: 110px;
    .el-input__inner {
      height: 28px;
      width: 110px;
      padding: 0px 18px;
    }
  }

  /deep/ .el-table thead {
    color: #004ca7 !important;
  }

  .btn {
    margin-top: 271px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 271px;
    .submit {
      width: 84px;
      height: 27px;
      line-height: 8px;
    }
  }

  .bottom-block {
    // display: flex;
    flex-direction: row;
    justify-content: space-between !important;
    .export-button {
      width: 127px;
      height: 27px;
      background: #fff6ef;
      border: 1px solid #f3b815;
      border-radius: 4px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      margin-top: 14px;
      > img {
        width: 17px;
        height: 17px;
      }
      > span {
        margin-left: 12px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #f3b815;
      }
    }
    .text {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      line-height: 39px;
      color: #004ca7;
    }
  }

  .btn-caozuo {
    margin: 0 auto;
    padding-top: 20px;
    text-align: center;
  }

  .border-left {
    padding: 0px 30px;
    border-left: 1px solid #004ca7;
  }

  /deep/ .el-tree-node__label {
    font-size: 17px;
    font-weight: bold;
  }

  /deep/ .el-tree-node__expand-icon {
    color: #004ca7;
  }

  .top-tab-query {
    margin-top: 20px;
    border-bottom: 1px solid #004ca7;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 160px 0 40px;

    .tab {
      display: flex;
      width: 500px;
      align-items: center;
      justify-content: space-around;
    }

    .tab-active {
      padding: 10px 20px;
      background: #004ca7;
      border-radius: 10px 10px 0 0;
      color: #fff;
      font-weight: bold;
      width: 110px;
      text-align: center;
      cursor: pointer;
    }

    .tab-no-select {
      padding: 10px 20px;
      border-radius: 10px 10px 0 0;
      color: #004ca7;
      font-weight: bold;
      background: #c7d7eb;
      width: 110px;
      text-align: center;
      cursor: pointer;
    }

    .query-tab {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 400px;
    }
  }

  .search-button {
    width: 77px;
    height: 28px;
    line-height: 28px;
    background: #f1f8fe;
    border: 1px solid #51aef6;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    > span {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #51aef6;
    }
    > img {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }
  }
</style>

<style lang="less" scoped>
  #select-class-room{
    /deep/ .el-button--warning.is-plain{
      background: #FFF6EF;
      border-color: #F3B815;
      color: #F3B815;
      border-radius: 6px;
    }
    /deep/ .el-button--warning.is-plain:focus, .el-button--warning.is-plain:hover{
      color: #F3B815;
      background: #FFF6EF;
      border: 1px solid #F3B815;
      border-radius: 6px;
    }

    /deep/ .el-button--danger.is-plain{
      background: #FFEFEF;
      border-color: #FF3819;
      color: #FF3819;
      border-radius: 6px;
    }

    /deep/ .el-button--danger.is-plain:hover{
      background: #FFEFEF;
      border: 1px solid #FF3819;
      color: #FF3819;
      border-radius: 6px;
    }
  }
</style>
